<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";
    /**
     * 语法: CanvasRenderingContext2D.textBaseline = value
     *
     * 描述:
     *
     * 该方法设置文字在垂直方向上的对齐方式.
     * 该属性可以取值: top, middle, bottom, hanging, alphabetic, ideographic
     * 基于参考点的直线, 其中 top, middle, buttom 分别表示靠上, 居中, 靠下对齐.
     * alphabetic 表示字母基线, 类似于英文字母的对齐方式. 例如 a, g, f 等字母.
     * ideographic 表意对齐. 使用字母对齐中超出的字母为参考. 即比字母基线略靠下.
     * 所有的对齐方式是根据文字特点相关的. 对于中文主要使用的还是 top, bottom 和 middle.
     */
    // ------------------
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'top';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

    // ------------------
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'bottom';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

    // ------------------
    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'middle';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

    // --------------------
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'alphabetic';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

    // -------------------------------------------------

    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'ideographic';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );

    // -------------------------------------------------

    ctx.translate( 0, 100 );
    ctx.moveTo( 100, 80 );
    ctx.lineTo( 500, 80 );
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '30px 黑体';

    ctx.textBaseline = 'hanging';
    ctx.fillText( 'abfghijklpqrty', 150, 80 );
</script>
</body>
</html>